<template>
  <div style="margin: 0 auto; width: 982px; height: 1842px">
    <el-aside
      style="width: 240px; height: 996px; float: left; padding-top: 40px"
      class="mmlelaside"
    >
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        text-color="rgb(0,0,0)"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/my/m/music/artist">
          <i class="el-icon-document"></i>
          <span slot="title" @click="kkk()">我的歌手</span>
        </el-menu-item>
        <el-menu-item index="/my/m/music/mv">
          <i class="el-icon-document"></i>
          <span slot="title">我的视频</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>创建的歌单</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="item in userPlaylist"
              v-if="item.creator.userId == kkid"
        
            >
              <div @click="toMp(item.id)">
                
                <img
                  :src="item.coverImgUrl"
                  alt=""
                  width="40px"
                  height="40px"
                />
                {{ item.name }}
              </div>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-upload"></i>
            <span>收藏的歌单</span>
          </template>

          <el-menu-item-group>
            <el-menu-item
              index=""
              v-for="item in userPlaylist"
              v-if="item.creator.userId != kkid"
            >
            <div @click="toMp(item.id)">
              <img :src="item.coverImgUrl" alt="" width="40px" height="40px" />
              {{ item.name }}</div></el-menu-item
            >
            
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main
      style="
        width: 740px;
        padding-top: 50px;
        height: 800px;
        border-right: solid 1px;
      "
    >
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </el-main>
  </div>
</template>
<script>
import Home from "@/components/content/Home/Home.vue";
import mymusicartist from "@/components/content/mymusicLogin/mymusicartist.vue";
import axios from "axios";
export default {
  name: "Mylo",
  components: { Home, mymusicartist },
  data() {
    return {
      user: {},
      userPlaylist: [],
      kkid: 0,
    };
  },

  mounted() {
    axios({
      url: "http://localhost:3000/user/account",
      method: "get",
      params: {
        cookie: window.sessionStorage.cookie,
      },
    }).then((res) => {
      this.user = res.data.account;
      //user.account.id即可获取id
      this.kkid = res.data.account.id;
      axios({
        url: "http://localhost:3000/user/playlist",
        method: "get",
        params: {
          // cookie: window.sessionStorage.cookie,
          uid: this.kkid,
        },
      }).then((res) => {
        console.log(res);
        this.userPlaylist = res.data.playlist;
        console.log(this.userPlaylist);
      });
    });
  },
  methods:{
    toMp(id){
     this.$router.push(`/my/m/music/playlist?id=${id}`)
     location.reload()
    }
  }
};
</script>

<style>
.mmlelaside {
  border: solid 1px;
}
</style>
